<template>
  <div class="content">
    <van-nav-bar title="小春通讯" left-arrow  @click-left="goBack">
        <template #left>
            <img src="@/assets/back.png" alt="" class="back">
        </template>
    </van-nav-bar>
    <div class="top">
        <img src="@/assets/shop/new/bg.png" alt="" class="img">
    </div>
    <div class="click_btn" @click="toSucc"></div>
    <div class="fit">
      <div class="bg">
        <img src="@/assets/shop/new/bg2.png" alt="" class="img">
      </div>
      <div class="fit-content">
        <div class="title">
          <img src="@/assets/shop/new/title_left.png" alt="" class="img">
          <div class="center">没开过店, 不要紧</div>
          <img src="@/assets/shop/new/title_right.png" alt="" class="img">
        </div>
        <div class="subtitle">
          <img src="@/assets/shop/new/subtitle_left.png" alt="" class="img">
          <div class="center">适合谁做？</div>
          <img src="@/assets/shop/new/subtitle_right.png" alt="" class="img">
        </div>
        <div class="list">
          <div class="item" v-for="(item, index) in list1" :key="index">
            <img :src="item.img" alt="" class="img">
            <div class="right">
              <div class="item_title">{{item.title}}</div>
              <div class="item_content">{{item.content}}</div>
            </div>
          </div>
        </div>
        <div class="subtitle">
          <img src="@/assets/shop/new/subtitle_left.png" alt="" class="img">
          <div class="center">遇到这些问题</div>
          <img src="@/assets/shop/new/subtitle_right.png" alt="" class="img">
        </div>
        <div class="question-list">
          <div v-for="(item,index) in questionList" :key="index" class="question_item">
            <img :src="item.img" alt="" class="img">
            <img :src="item.title" alt="" class="question_title">
          </div>
        </div>
      </div>
    </div>
    <div class="advantage">
        <div class="bg">
          <img src="@/assets/shop/new/bg3.png" alt="" class="img">
        </div>
        <div class="advantage-content">
          <div class="title">
            <!-- <img src="@/assets/shop/new/title_left.png" alt="" class="img">
            <div class="center">帮您一站式解决问题</div>
            <img src="@/assets/shop/new/title_right.png" alt="" class="img"> -->
          </div>
          <div class="subtitle">
            <img src="@/assets/shop/new/subtitle_left.png" alt="" class="img">
            <div class="center">只需一部手机，就能在家开店</div>
            <img src="@/assets/shop/new/subtitle_right.png" alt="" class="img">
          </div>
          <div class="list">
            <div class="item" v-for="(item, index) in list2" :key="index">
              <img :src="item.img" alt="" class="img">
              <div class="item_content">{{item.content}}</div>
            </div>
          </div>
        </div>
    </div>

    <div class="btn-info">
      <van-button class="btn" @click="toSucc">限时免费开店</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      list1:[
        {
          img:require('@/assets/shop/new/item1.png'),
          title:'时间不自由的宝妈们',
          content:'家有四脚吞金兽，有孩子需要花钱'
        },
        {
          img:require('@/assets/shop/new/item2.png'),
          title:'赚点零花钱的大学生',
          content:'电子设备，游戏装备太贵，生活费不够花'
        },
        {
          img:require('@/assets/shop/new/item3.png'),
          title:'寻找项目的创业小白',
          content:'有颗创业的心，却没好项目选择'
        },
        {
          img:require('@/assets/shop/new/item4.png'),
          title:'想多份收入的上班族',
          content:'工资低，加薪难，仅靠工资不够花'
        }
      ],
      questionList:[
        {
          img:require('@/assets/shop/new/question1.png'),
          title:require('@/assets/shop/new/title1.png'),
        },
        {
          img:require('@/assets/shop/new/question2.png'),
          title:require('@/assets/shop/new/title2.png'),
        },
        {
          img:require('@/assets/shop/new/question3.png'),
          title:require('@/assets/shop/new/title3.png'),
        },
        {
          img:require('@/assets/shop/new/question4.png'),
          title:require('@/assets/shop/new/title4.png'),
        },
      ],
      list2:[
        {
          img:require('@/assets/shop/new/1.png'),
          content:'免保证金，1人在家、1部手机'
        },
        {
          img:require('@/assets/shop/new/2.png'),
          content:'10000+品牌入驻，一件代发，不用囤货发货'
        },
        {
          img:require('@/assets/shop/new/3.png'),
          content:'无经验零基础开店，无资金要求'
        },
        {
          img:require('@/assets/shop/new/4.png'),
          content:'佣金比例10%～30%，提现秒到账'
        },
        {
          img:require('@/assets/shop/new/5.png'),
          content:'专门指导开店，无需拍摄，一键转发商品赚钱 '
        },
        {
          img:require('@/assets/shop/new/6.png'),
          content:'平台100%正品保证，专业客服团队全程服务'
        },

      ]
    }
  },
  mounted(){

  },
  methods:{
    goBack(){

    },
    toSucc(){
      this.$router.push("/newShopSucc");
    }
  }
}
</script>

<style scoped>
div {
    box-sizing: border-box;
}
.content {
  min-height: 100vh;
  background-color: #FF2B49;
  background-size: 100%;
  font-family: Alibaba PuHuiTi;
  padding-bottom: 10px;
  position: relative;
}
.back {
    height: 22px;
}
.top .img {
  width: 100vw;
}
.click_btn {
  width: 70%;
  height: 18vw;
  position: absolute;
  top: calc(46px + 46vw);
  left: 50%;
  transform: translateX(-50%);
  /* background-color: #fff; */
  background-color: transparent;
  border-radius: 35px;
  border: none;
}
.fit {
  width: calc(100% - 20px);
  margin: -160px 10px 0;
  background-size: 100%;
  position: relative;
}
.fit .bg {
  width: 100%;
}
.fit .bg .img{
  width: 100%;
}
.fit-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 5.5% 3%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.fit .title {
  padding: 0 14%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 6%;
  font-size: 19px;
  font-weight: bold;
  color: #D91B42;
  line-height: 35px;
}

.fit .title .img {
  width: 16px;
  height: 16px;
  margin-top: 5px;
}

.fit .subtitle{
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 100%;
  color: #FCF5D8;
  line-height: 35px;
}
.fit .subtitle .img {
  width: 61px;
  height: 11px;
}

.fit .list {
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.fit .list .item {
  height: 64px;
  width: 100%;
  padding: 0 13px;
  background-color: #b00233;
  border-radius: 8px;
  border: 1px solid #ed2a5a;
  display: flex;
  align-items: center;
}
.fit .list .item .img {
  width: 48px;
  height: 48px;
  margin-right: 10px;
}
.fit .list .item .right{
  height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fit .list .item .item_title {
  font-size: 15px;
  font-family: PingFang SC;
  color: #FCF5D8;
}
.fit .list .item .item_content {
  font-size: 13px;
  font-family: Source Han Sans CN;
  color: #FFFFFF;
}

.fit .question-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.fit .question-list .question_item {
  width: 48%;
  position: relative;
  margin-bottom: 13px;
}
.fit .question-list .question_item .img{
  width: 100%;
}
.fit .question-list .question_item .question_title {
  position: absolute;
  top: -2px;
  left: 0;
  width: 102px;
  object-fit: cover;
}

.advantage {
  width: calc(100% - 20px);
  margin: 10px 10px 0;
  background-size: 100%;
  position: relative;
}

.advantage .bg {
  width: 100%;
}
.advantage .bg .img {
  width: 100%;
}
.advantage-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 5.5% 8%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.advantage .title  {
  padding: 0 15.8%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 7.8%;
  font-size: 21px;
  font-weight: bold;
  color: #D91B42;
  line-height: 35px;
}

.advantage .title .img {
  width: 16px;
  height: 16px;
  margin-top: 5px;
}
.advantage .subtitle{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 100%;
  color: #FCF5D8;
  line-height: 35px;
  font-size: 14px;
}
.advantage .subtitle .img {
  width: 61px;
  height: 11px;
}
.advantage .advantage-content .list {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FCF5D8;
  line-height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 80%;
}
.advantage .advantage-content .list .item {
  position: relative;
  height: 60px;
  width: 100%;
}
.advantage .advantage-content .list .img {
  width: 100%;
}
.advantage .advantage-content .list .item_content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 8% 2% 8% 32%;
  display: flex;
  align-items: center;
  font-size: 15px;
}

.btn-info {
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn {
  width: 85%;
  height: 46px;
  background: linear-gradient(0deg, #FEF1DB, #FFC288);
  box-shadow: 0px 2px 2px 0px rgba(201,67,2,0.4);
  border-radius: 32px;
  font-size: 19px;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  color: #D91B42;
  letter-spacing: 1px;
}
</style>